import React, { Component } from 'react'
import '../../assets/index.css'
// 导入图片
import tx from '../../assets/images/avatar.png'
// 导入moment
import moment from 'moment'
class App extends Component {
  state = {
    // 文本框内容
    texts: '',
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    // 当前选中的 tab 的type 值
    active: 'hot',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
  }
  // 格式化时间
  formatTime = (date) => {
    return moment(date).format('YYYY年MM月DD日')
  }
  //tab 栏切换
  changeTabName = (type) => {
    this.setState({ ...this.state, active: type })
  }
  // 发布评论
  // 获取文本框内容
  getTexts = (e) => {
    this.setState({
      texts: e.target.value,
    })
    // console.log(e.target.value)
  }
  // 发布
  publish = () => {
    const newList = [...this.state.list]
    if (!this.state.texts.trim()) return this.setState({ texts: '' })
    newList.unshift({
      id: this.state.list.length + 1,
      author: '作者',
      comment: this.state.texts,
      time: new Date(),
      // 1: 点赞 0：无态度 -1:踩
      attitude: 0,
    })
    this.setState({
      list: newList,
      texts: '',
    })
  }
  // 删除评论
  delLi = (id) => {
    console.log(id)
    const newList = this.state.list.filter((item) => {
      return item.id !== id
    })
    this.setState({ list: newList })
  }
  // 点赞
  clickedUp = (id, attitude) => {
    console.log(attitude)
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            attitude: attitude === 1 ? 0 : 1,
          }
        } else {
          return item
        }
      }),
    })
  }
  // 踩
  clickedDown = (id, attitude) => {
    console.log(attitude)
    this.setState({
      list: this.state.list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            attitude: attitude === -1 ? 0 : -1,
          }
        } else {
          return item
        }
      }),
    })
  }
  render() {
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>{this.state.list.length} 评论</span>
          </div>
          {/* 排序 */}
          <div className="tabs-order">
            <ul className="sort-container">
              {/* <li className="on">按热度排序</li>
              <li>按时间排序</li> */}
              {this.state.tabs.map((tab) => (
                <li
                  className={this.state.active === tab.type ? 'on' : ''}
                  key={tab.id}
                  onClick={() => this.changeTabName(tab.type)}>
                  {tab.name}
                </li>
              ))}
            </ul>
          </div>

          {/* 添加评论 */}
          <div className="comment-send">
            <div className="user-face">
              <img className="user-head" src={tx} alt="" />
            </div>
            <div className="textarea-container">
              <textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.texts}
                onChange={this.getTexts}
              />
              <button className="comment-submit" onClick={this.publish}>
                发表评论
              </button>
            </div>
            <div className="comment-emoji">
              <i className="face"></i>
              <span className="text">表情</span>
            </div>
          </div>

          {/* 评论列表 */}
          <div className="comment-list">
            {this.state.list.map((item) => {
              return (
                <div className="list-item" key={item.id}>
                  <div className="user-face">
                    <img className="user-head" src={tx} alt="" />
                  </div>
                  <div className="comment">
                    <div className="user">{item.author}</div>
                    <p className="text">{item.comment}</p>
                    <div className="info">
                      <span className="time">{this.formatTime(item.time)}</span>
                      <span
                        className={item.attitude === 1 ? 'like liked' : 'like'}>
                        <i
                          className="icon"
                          onClick={() => this.clickedUp(item.id, item.attitude)}
                        />
                      </span>
                      <span
                        className={
                          item.attitude === -1 ? 'hate hated' : 'hate'
                        }>
                        <i
                          className="icon"
                          onClick={() =>
                            this.clickedDown(item.id, item.attitude)
                          }
                        />
                      </span>
                      <span
                        className="reply btn-hover"
                        onClick={() => this.delLi(item.id)}>
                        删除
                      </span>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
      </div>
    )
  }
}
export default App
